<template>
	<!-- 列印装箱单 -->
	<v-dialog v-model="productDelivery.printPackingOrderDialog" persistent max-width="1250px">
		<v-card>
			<v-card-title>列印装箱单</v-card-title>
			<v-card-text>

				<div class="dayin">
					<div ref="print" id="printPackingOrder">
						<div class="text-center mb-2" style="margin-left: 200px;">
							<div style="display: inline-block;vertical-align: middle;margin-bottom: 10px;">
								<img src="../../../../../../public/image/companylog.png" />
							</div>
							<div>
								<div class="font-weight-bold" style="inline-block;vertical-align: middle;">
									<p style="letter-spacing:5px;">昆山同日工业自动化有限公司</p>
									<p style="letter-spacing:2px;">Tungray lndustrial Automation ( Kunshan )
										Co.,Ltd.</p>
									<p style="letter-spacing:5px;">地址:江苏省昆山淀山湖镇丁家浜路3号</p>
									<p style="letter-spacing:5px;">电话:0512-36829026</p>
								</div>
							</div>
						</div>
						<div class="text-center mb-5" style="letter-spacing:35px;margin-left: 200px;">
							<h1>装箱单</h1>
						</div>

						<table class="tab">
							<tbody class="top-tbody">
								<tr style="height:25px;">
									<td style="width:95px;font-weight:bold">项目号</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										{{productDelivery.productDeliveryModel.projectcode}}
									</td>
									<td style="width:95px;font-weight:bold">楼层库号</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										{{productDelivery.productDeliveryModel.floor+""+productDelivery.productDeliveryModel.libraryno}}
									</td>
									<td style="width:95px;font-weight:bold">装箱日期</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										{{productDelivery.productDeliveryModel.packtime}}
									</td>
								</tr>
								<tr style="height:25px;">
									<td style="width:95px;font-weight:bold">L/W/H(长/宽/高)其它</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										
									</td>
									<td style="width:95px;font-weight:bold">包装材料</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										木箱  板条箱  纸箱  其它
									</td>
									<td style="width:95px;font-weight:bold">箱数</td>
									<td style="width:95px;font-weight:bold;text-align: center;">
										箱
									</td>
								</tr>
							</tbody>
						</table>
						<table class="tab" style="border-top:none;">
							<tbody class="bottom-tbody">
								<tr>
									<td style="font-weight:bold; text-align:center;" colspan="6">装箱明细</td>
								</tr>
								<tr class="tr-head" style="height:25px;">
									<td class="td-bold td-center column-1">序号</td>
									<td class="td-bold td-center column-2">产品</td>
									<td class="td-bold td-center column-3">产品规格及型号</td>
									<td class="td-bold td-center column-4">数量</td>
									<td class="td-bold td-center column-5" colspan="2">备注</td>
								</tr>


								<tr v-for="(detail,index) in productDelivery.productDeliveryModel.detailList"
									:key="index" class="tr-body" style="height:25px;">
									<td class="td-body-color td-center column-1 column-body-1">
										{{index+1}}
									</td>
									<td class="td-body-color td-center column-2 column-body-2">
										{{detail.name}}
									</td>
									<td class="td-body-color td-center column-3 column-body-3">
										{{detail.model}}
									</td>
									<td class="td-body-color td-center column-4 column-body-4">
										{{detail.qty+detail.unit}}
									</td>
									<td class="td-body-color td-center column-5 column-body-5" colspan="2">
										{{detail.description}}
									</td>
								</tr>
							</tbody>
						</table>
					<p class="mt-4">Your faithfuly:</p>
					<p class="mt-2">供应商:昆山同日工业自动化有限公司</span>
					<p class="mt-2">装箱员:</span>
					</p>
					</div>
				</div>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<div class="no-print">
					<v-btn color="primary" text @click="printContext">打印</v-btn>
					<v-btn color="primary" text @click="productDelivery.printPackingOrderDialog=false">关闭</v-btn>
				</div>
			</v-card-actions>
		</v-card>
	</v-dialog>

</template>


<script>
	import print from 'print-js'
	export default {
		name: 'packingorder',
		props: {
			callBackLoadProcessCards: {
				type: Function, //参数类型：函数
			},
			productDelivery: {
				productDeliveryModel: {},
				printPackingOrderDialog: false,
			}
		},
		data: () => ({

		}),
		watch: {
			productDelivery: {
				handler(newVal) {
					this.$emit('update:productDelivery', newVal)

				},
				deep: true
			},
		},
		methods: {

			printContext() {
				printJS({
					printable: 'printPackingOrder',
					type: 'html',
					documentTitle: '成品发货',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})
				
				this.productDelivery.printPackingOrderDialog=false
			},
		}
	}
</script>


<style scoped>
	@import url("../../../../../../public/css/print.css");
</style>
